<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="查询方式：">
              <el-select
                style="width: 180px"
                v-model="form.queryType"
                placeholder="请选择"
                @change="changeHandler"
              >
                <el-option
                  v-for="item in form.queryTypeList"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择日期：">
              <el-date-picker
                v-model="form.valueDay"
                :type="form.typeDatePicker"
                :value-format="form.formatDatePicker"
                placeholder="选择日期"
                style="width: 180px"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="点位名称：">
              <el-select
                style="width: 180px"
                v-model="form.valuePointID"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in selectPointData"
                  :key="item.ID"
                  :label="item.POINTNAME"
                  :value="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="exportExcel"
              >导 出</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column
        prop="点位名称"
        label="点位名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="总重量"
        label="总重量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="总桶数"
        label="总桶数"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
          v-if="scope.row.isHide != 1"
            type="text"
            icon="el-icon-info"
            @click="handleEdit(scope.$index, scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog
      :title="dialogDetail4Title"
      :visible.sync="dialogDetail4Show"
      width="60%"
      class="dialogchild"
    >
      <el-form class="dialogform">
        <el-table :data="dialogDetail4Data">
          <el-table-column
            prop="点位名称"
            label="点位名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="日收运量"
            label="日收运量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="日收运桶数"
            label="日收运桶数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="日期"
            label="日期"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-info"
                @click="handleEdit4(scope.$index, scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="dialogDetail2Title"
      :visible.sync="dialogDetail2Show"
      width="60%"
      class="dialogchild"
    >
      <el-form class="dialogform">
        <el-table :data="dialogDetail2Data">
          <el-table-column
            prop="点位名称"
            label="点位名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="收运量"
            label="收运量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="收运桶数"
            label="收运桶数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="收运结束时间"
            label="收运结束时间"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-info"
                @click="handleEdit2(scope.$index, scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="dialogDetail3Title"
      :visible.sync="dialogDetail3Show"
      width="60%"
      class="dialogchild"
    >
      <el-form class="dialogform">
        <el-table :data="dialogDetail3Data">
          <el-table-column
            prop="点位名称"
            label="点位名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="挂桶序号"
            label="挂桶序号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="挂桶时间"
            label="挂桶时间"
            align="center"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="挂桶重量"
            label="挂桶重量"
            align="center"
          ></el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, // 初始页
      pageSize: 10, //    每页的数据
      form: {
        radioData: '日',
        valueDay: '',
        valueDaySelect: '',
        valueMonth: '',
        valuePointID: '0',
        valueType: '',
        typeDatePicker: 'date',
        formatDatePicker: 'yyyy-MM-dd',
        queryType: 1,
        queryTypeList: [{
          value: 1,
          label: '按日期查询'
        }, {
          value: 2,
          label: '按月份查询'
        }]
      },
      isShowSelectCLZ: localStorage.getItem('LOGIN_NAME') === 'yanshiclz',
      selectCLZ: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '处理站1'
       }, {
        value: '2',
        label: '处理站2'
         }, {
        value: '3',
        label: '处理站3'
         }, {
        value: '4',
        label: '处理站4'
         }, {
        value: '5',
        label: '处理站5'
      }],
      selectPointData: [],
      selectExcelData: [],
      tableData: [],
      dialogDetail2Title: '',
      dialogDetail2Show: false,
      dialogDetail2Data: [],
      dialogDetail3Title: '',
      dialogDetail3Show: false,
      dialogDetail3Data: [],
      dialogDetail4Title: '',
      dialogDetail4Show: false,
      dialogDetail4Data: [],
      dialogDetail5Title: '',
      dialogDetail5Show: false,
      dialogDetail5Data: []
    }
  },
  created () {
    this.form.valueDay = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
    this.form.valueMonth = formatDate(new Date(), 'yyyy-MM')
    this.getlistdata()
    this.getpointdata()
  },
  methods: {
    changeHandler (value) {
      switch (this.form.queryType) {
        case 1:
          this.form.typeDatePicker = 'date'
          this.form.formatDatePicker = 'yyyy-MM-dd'
          break
        case 2:
          this.form.typeDatePicker = 'month'
          this.form.formatDatePicker = 'yyyy-MM'
          break
        case 3:
          this.form.typeDatePicker = 'year'
          break
        default:
          break
      }
      this.form.valueDay = ''
    },
    async getlistdata () {
      // GetRubbishWeightByPoint(string Level, string Date, string ClientNo, string PointName, string CarID, string PointID, string BoxID)
      // EXEC S_GetRubbishWeightByPoint '2021-10-12','0000019',4,'二驴炒鸡',635,3612--详情某次分桶
      var url = '/RubbishVehicle/GetRubbishWeightByPoint?Date=' + this.form.valueDay + '&ClientNo=' + localStorage.getItem('CLIENT_NO') + '&Level=1&PointName=&PointID=' + this.form.valuePointID + '&BoxID=0'
      // console.log('url=' + url)
      const { data } = await this.$Http.get(url)
      // var numSum = 0,weightSum = 0;
      // data.forEach(element => {
      //   element.日期 = this.form.valueMonth
      //   numSum += parseFloat(element.桶数);
      //   weightSum += parseFloat(element.重量);
      // });
      this.tableData = data
      // if (this.form.valuePointID != '') {
      //   this.tableData = data.filter(item => item.ID === this.form.valuePointID)
      // } else {
      //   this.tableData = data
      //   // this.tableData.unshift({"isHide":1,"车辆名称":this.form.valueMonth+' 汇总',"点位名称":null,"日期":this.form.valueMonth,"重量":weightSum.toFixed(2),"桶数":numSum})
      // }
    },
    async getpointdata () {
      var url = '/RubbishVehicle/GetWeightPoint?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.selectPointData = data
    },
    // async getexceldata () {
    //   var url = '/RubbishVehicle/GetRubbishWeightExcel?Date=' + this.form.valueDay + '&ClientNo=' + localStorage.getItem('CLIENT_NO') + '&PointID=0&CarID=' + this.form.valuePointID
    //   const { data } = await this.$Http.get(url)
    //   this.selectExcelData = data
    // },
    // 导出Excel
    exportExcel () {
      const excelName = '挂桶点位称重数据'
      var tHeader = ['点位名称', '总重量', '总桶数']
      var filterVal = ['点位名称', '总重量', '总桶数']
      export2Excel(tHeader, filterVal, this.tableData, excelName)
    },
    handleEdit (index, row) {
      this.getDetail4(row.ID, row.点位名称)
    },
    async getDetail4 (id, name) {
      this.dialogDetail4Title = name + ' 于 ' + this.form.valueDay + ' 收运详情'
      var url = '/RubbishVehicle/GetRubbishWeightByPoint?Date=' + this.form.valueDay + '&ClientNo=' + localStorage.getItem('CLIENT_NO') + '&Level=2&BoxID=0&PointName=' + name + '&PointID=' + id
      const { data } = await this.$Http.get(url)
      this.dialogDetail4Data = data
      this.dialogDetail4Show = true
    },
    handleEdit4 (index, row) {
      this.form.valueDaySelect = row.日期
      this.getDetail2(row.ID, row.点位名称)
    },
    async getDetail2 (id, name) {
      this.dialogDetail2Title = name + ' 于 ' + this.form.valueDaySelect + ' 收运详情'
      var url = '/RubbishVehicle/GetRubbishWeightByPoint?Date=' + this.form.valueDaySelect + '&ClientNo=' + localStorage.getItem('CLIENT_NO') + '&Level=3&BoxID=0&PointName=' + name + '&PointID=' + id
      const { data } = await this.$Http.get(url)
      this.dialogDetail2Data = data
      this.dialogDetail2Show = true
    },
    handleEdit2 (index, row) {
      this.getDetail3(row)
    },
    async getDetail3 (row) {
      this.dialogDetail3Title = '按桶收运详情'
      var url = '/RubbishVehicle/GetRubbishWeightByPoint?Date=' + this.form.valueDaySelect + '&ClientNo=' + localStorage.getItem('CLIENT_NO') + '&Level=4&BoxID=' + row.WEIGHT_ID + '&PointID=' + row.ID + '&PointName=' + row.点位名称
      const { data } = await this.$Http.get(url)
      this.dialogDetail3Data = data
      this.dialogDetail3Show = true
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
/* 弹出框 */
.el-dialog {
  background: #ccd8e7;
  padding: 0px 10px 10px;
}
.el-dialog__title {
  color: #15428b;
  font-size: 16px;
  font-weight: 600;
}
.el-dialog__body {
  background: #dfe8f6;
  border: 1px solid #99bbe8;
}
.el-dialog__footer {
  padding: 10px 0px;
}
</style>
